<nz-spin [nzSpinning]="loading">
  <div class="form-fieldset form-horizontal form-align-left">
    <fieldset>
      <div class="form-static">
        <div class="form-group">
          <label class="control-label col-em-6">调用地址：</label>
          <div class="col-em-offset-6">
            <p class="form-control-static" style="position: relative;word-break: break-all;">{{invokeUrl}}{{canInvoke ?
              invokePath : ""}} <a class="td-opt" ngxClipboard [cbContent]="invokeUrl" (cbOnSuccess)="successFun()"
                *ngIf="canInvoke" style="position: absolute;margin-left: 4px;">
                <i class="anticon anticon-copy" nz-popover nzPopoverContent="点击复制"></i>
              </a>
              <a class="td-opt" *ngIf="!canInvoke" style="position: absolute;margin-left: 4px;" (click)="getTrigger()">
                <i class="anticon anticon-reload" nz-popover nzPopoverContent="刷新"></i>
              </a>
            </p>
          </div>
        </div>
        <div class="form-group">
          <label class="control-label col-em-6">认证方式：</label>
          <div class="col-em-offset-6">
            <p class="form-control-static">{{httpTriggerConfig?.authType == "anonymous" ? "Anonymous" :
              httpTriggerConfig?.authType == "iam" ? "IAM 认证" : "--"}}</p>
          </div>
        </div>
      </div>
    </fieldset>
  </div>
</nz-spin>

<nz-spin [nzSpinning]="isLoadingInvoke" nzTip="执行中...">
  <div style="padding-bottom: 0.12rem;">
    <div class="tab-page clearfix">
      <div class="covered-form" [class.hide]="cover">
        <div class="sub-area-title">
          调试 HTTP 触发器
        </div>
        <div class="covered-form-content">
          <form nz-form [formGroup]="queryForm">
            <!-- 添加防CSRF验证字段 -->
            <input type="hidden" formControlName="timestamp" />
            <input type="hidden" formControlName="nonce" />
            <nz-form-item>
              <nz-form-label>请求方式<span class="required-icon">*</span></nz-form-label>
              <nz-form-control>
                <nz-select nzPlaceHolder="请选择请求方式" formControlName="method">
                  <nz-option nzLabel="GET" nzValue="GET"></nz-option>
                  <nz-option nzLabel="POST" nzValue="POST"></nz-option>
                  <nz-option nzLabel="PUT" nzValue="PUT"></nz-option>
                  <nz-option nzLabel="DELETE" nzValue="DELETE"></nz-option>
                  <nz-option nzLabel="HEAD" nzValue="HEAD"></nz-option>
                  <nz-option nzLabel="PATCH" nzValue="PATCH"></nz-option>
                </nz-select>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-label>请求路径<span class="required-icon">*</span></nz-form-label>
              <nz-form-control>
                <input formControlName="path" class="form-input" placeHolder="请输入请求路径，以 / 开头" [(ngModel)]="invokePath"
                  nz-input>
                <ng-container
                  *ngIf="queryForm.get('path') && queryForm.get('path').dirty && queryForm.get('path').errors">
                  <nz-form-explain class="from-help input-group table-help"
                    *ngIf="queryForm.get('path').hasError('required')">
                    请求路径不能为空
                  </nz-form-explain>
                  <nz-form-explain class="from-help input-group table-help"
                    *ngIf="queryForm.get('path').hasError('pattern')">
                    请求路径以 / 开头
                  </nz-form-explain>
                </ng-container>
              </nz-form-control>
            </nz-form-item>
            <nz-form-item>
              <nz-form-control>
                <button nz-button nzType="primary" (click)="run()" [nzLoading]="isLoadingInvoke"
                  [disabled]="!canInvoke || fcsInstance?.status !=='success'">
                  <span>执行</span>
                </button>
              </nz-form-control>
            </nz-form-item>

            <legend>请求 Body（raw）</legend>
            <nz-form-item>
              <nz-form-control style="padding-left: 0;">
                <ngx-monaco-editor [options]="editorOptionsEvent" [(ngModel)]="requestBody" class="my-code-editor"
                  formControlName="requestBody">
                </ngx-monaco-editor>
              </nz-form-control>
            </nz-form-item>
          </form>
        </div>
      </div>
      <div class="covering-result" [class.cover]="cover">
        <button nz-button class="cover-icon" [class.after-cover]="cover" (click)="cover=!cover" style="z-index: 99;">
          <ng-container *ngIf="!cover"><i class="anticon anticon-caret-left"></i></ng-container>
          <ng-container *ngIf="cover"><i class="anticon anticon-caret-right"></i></ng-container>
        </button>
        <div class="form-fieldset form-horizontal form-align-left" style="padding: 0.15rem;">
          <fieldset>
            <legend>执行摘要</legend>
            <div nz-col nzSpan="24" class="gutter-row flex-span">
              <div class="form-static" style="margin-bottom: 0;">
                <div class="form-group">
                  <div nz-col nzSpan="24" class="gutter-row flex-span">
                    <div class="form-static" style="margin-bottom: 0;">
                      <div class="form-group">
                        <label class="control-label col-em-7">RequestID：</label>
                        <div class="col-em-offset-7">
                          <p class="form-control-static">{{responseHeader.FcRequestId || '--'}}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="form-group">
                  <div nz-col nzSpan="8" class="gutter-row flex-span">
                    <div class="form-static" style="margin-bottom: 0;">
                      <div class="form-group">
                        <label class="control-label col-em-7">状态码： </label>
                        <div class="col-em-offset-7">
                          <p class="form-control-static invoke-success"
                            *ngIf="responseHeader.FcStatus > 0 && responseHeader.FcStatus < 400">
                            {{responseHeader.FcStatus}}</p>
                          <p class="form-control-static invoke-failed" *ngIf="responseHeader.FcStatus >= 400">
                            {{responseHeader.FcStatus}}
                          </p>
                          <p class="form-control-static invoke-failed" *ngIf="responseHeader.FcStatus == 0">ERROR</p>
                          <p class="form-control-static" *ngIf="responseHeader.FcStatus < 0">--</p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div nz-col nzSpan="8" class="gutter-row flex-span nzSpan-padding">
                    <div class="form-static" style="margin-bottom: 0;">
                      <div class="form-group">
                        <label class="control-label col-em-7">执行时间： </label>
                        <div class="col-em-offset-7">
                          <p class="form-control-static">
                            {{responseHeader.FcDuration ? responseHeader.FcDuration + 'ms': '--'}}
                          </p>
                        </div>
                      </div>
                    </div>
                  </div>
                  <div nz-col nzSpan="8" class="gutter-row flex-span nzSpan-padding">
                    <div class="form-static" style="margin-bottom: 0;">
                      <div class="form-group">
                        <label class="control-label col-em-7">运行内存： </label>
                        <div class="col-em-offset-7">
                          <p class="form-control-static">
                            {{responseHeader.FcMaxMemoryUsage ? responseHeader.FcMaxMemoryUsage + 'MB' : '--'}}</p>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </fieldset>

          <fieldset>
            <legend>响应 Body</legend>
            <pre class="return-msg-height"><code>{{responseBody || '--'}}</code></pre>
          </fieldset>

          <fieldset>
            <legend>执行日志</legend>
            <pre class="invoke-log"><code>{{responseHeader.FcLog || '--'}}</code></pre>
          </fieldset>
        </div>
      </div>
    </div>
  </div>
</nz-spin>




<!-- <nz-spin [nzSpinning]="isLoadingInvoke" nzTip="执行中...">
  <div class="tab-page clearfix">
    <div class="covered-form pl16" [class.hide]="cover">
      <div class="form-fieldset form-horizontal form-align-left" style="border: none;">
        <fieldset>
          <legend>触发事件（event）</legend>
          <div nz-col nzSpan="24" class="gutter-row flex-span">
            <fieldset>
              <ngx-monaco-editor [options]="editorOptionsEvent" [(ngModel)]="invokeEvent"
                (ngModelChange)="invokeEventChange()" class="my-code-editor">
              </ngx-monaco-editor>
            </fieldset>
          </div>
        </fieldset>
      </div>
    </div>
    <div class="covering-result pl16" [class.cover]="cover">
      <button *ngIf="cover" nz-button class="cover-icon" [class.after-cover]="cover" (click)="cover=!cover" nz-popover
        nzContent="触发事件（event）" nzPlacement="right">
        <i class="anticon anticon-caret-right"></i>
      </button>
      <button *ngIf="!cover" nz-button class="cover-icon" [class.after-cover]="cover" (click)="cover=!cover">
        <i class="anticon anticon-caret-left"></i>
      </button>

      <div class="form-fieldset form-horizontal form-align-left" style="border: none;padding-right: 0.12rem;">
        <fieldset>
          <legend>执行摘要</legend>
          <div nz-col nzSpan="24" class="gutter-row flex-span">
            <div class="form-static" style="margin-bottom: 0;">
              <div class="form-group">
                <div nz-col nzSpan="24" class="gutter-row flex-span">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">RequestID：</label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static">{{invokeData?.requestId || '--'}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div nz-col nzSpan="24" class="gutter-row flex-span">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">代码校验： </label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static">{{invokeData?.checksum || '--'}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="form-group">
                <div nz-col nzSpan="8" class="gutter-row flex-span">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">执行状态： </label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static invoke-success"
                          *ngIf="invokeData && invokeData.returnCode == 200">
                          成功</p>
                        <p class="form-control-static invoke-failed"
                          *ngIf="invokeData && invokeData.returnCode != 200 && invokeData.returnCode != 0">
                          失败
                        </p>
                        <p class="form-control-static"
                          *ngIf="(invokeData && invokeData.returnCode == 0) || invokeData === undefined">--</p>
                      </div>
                    </div>
                  </div>
                </div>
                <div nz-col nzSpan="8" class="gutter-row flex-span nzSpan-padding">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">执行时间： </label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static">
                          {{invokeData?.runtimeDuration ? invokeData?.runtimeDuration + 'ms': '--'}}
                        </p>
                      </div>
                    </div>
                  </div>
                </div>
                <div nz-col nzSpan="8" class="gutter-row flex-span nzSpan-padding">
                  <div class="form-static" style="margin-bottom: 0;">
                    <div class="form-group">
                      <label class="control-label col-em-7">运行内存： </label>
                      <div class="col-em-offset-7">
                        <p class="form-control-static">
                          {{invokeData?.memoryUsage ? invokeData?.memoryUsage + 'MB' : '--'}}</p>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </fieldset>

        <fieldset>
          <legend>返回结果</legend>
          <pre class="return-msg-height"><code>{{invokeData?.returnMsg || '--'}}</code></pre>
        </fieldset>

        <fieldset>
          <legend>执行日志</legend>
          <pre class="invoke-log"><code>{{invokeData?.log || '--'}}</code></pre>
        </fieldset>
      </div>
    </div>
  </div>
</nz-spin> -->
